<template>
  <el-config-provider namespace="ep">
    <BaseHeader />
    <div
      style="
        display: flex;
        height: calc(100vh - 60px);
        overflow-y: hidden !important;
      "
    >
      <BaseSide />
      <Left v-model:radio="radio" />
      <div class="divider" />
      <div class="right">
        <div class="m10 h80 w50" v-if="radio == 'Transfer'">
          <Transfer
            ref="transfer"
            :treeData="transferData"
            :showIcon="true"
            srarchDes="自定义搜索提示"
            :loading="loading"
            :searchEnable="true"
            :breadCrumbEnable="true"
            v-model:selectedIdList="selectedIdList"
            :disabledIdList="disabledIdList"
            checkAllLabel="全选"
            checkedLabel="已选"
            :propsMap="{
              label: 'label',
              value: 'id',
              children: 'children',
              member: 'member',
              desId: 'orgId',
            }"
            unit="人"
          >
            <template #memberIcon><Avatar /></template>
            <template #childrenIcon><OfficeBuilding /></template>
            <template #unselectIcon><CloseBold /></template>
            <template #lowerLevelLabel>下级</template>
          </Transfer>
        </div>
        <div class="m10 h80 w25 border" v-if="radio == 'Tree'">
          <Tree
            ref="neu_tree"
            :maxlevel="6"
            placeholder="自定义搜 索提示 "
            :dataSource="treeData"
            :propsMap="{
              children: 'children',
              label: 'label',
              value: 'id',
              parentId: 'parentId',
              disabled: 'disabled',
            }"
            v-model:currentNodeKey="currentNodeKey"
            :needOperate="true"
            :operateMap="[1, 2, 3, 4]"
            :expandOnClickNode="false"
            :check="check"
            :afterClose="afterClose"
            :afterSearch="afterSearch"
            :onSave="onSave"
            :onDelete="onDelete"
            :afterCancel="afterCancel"
            :nodeClick="aaaaaa"
          />
        </div>
        <div class="m10 h80" v-if="radio == 'Reward'">
          <h1>Your recognition is the driving force for me to move forward!</h1>
          <div class="block m10">
            <el-image :src="Reward" />
          </div>
        </div>
        <div class="result" v-if="radio != 'Reward'">
          <span style="font-weight: 600; margin-left: 10px"> 结果 </span>
          <div class="m10 p10">
            {{
              radio == "Tree"
                ? "currentNodeKey：" + currentNodeKey
                : "selectedIdList：[" + selectedIdList + "]"
            }}
          </div>
        </div>
      </div>
    </div>
  </el-config-provider>
</template>
<script setup>
import Transfer from "./components/Transfer/index.vue";
import Tree from "./components/Tree/index.vue";
import Left from "~/components/Left/index.vue";
import { ref, onMounted, watch } from "vue";
import { Avatar, CloseBold, OfficeBuilding } from "@element-plus/icons-vue";
import Reward from "./assets/Reward.jpg";
const radio = ref("Transfer");
const plugins = ref(["Transfer", "Tree"]);
const transferData = ref([]);
const treeData = ref([]);
const loading = ref(false);
const currentNodeKey = ref("710da446419b4ff28ec60d35743bb422");
const selectedIdList = ref([
  "gudch",
  "key1",
  "memadfberb",
  "memqeber2",
  "mtrewember3",
  "memwqreber3",
  "membeadfsra2",
]);
const disabledIdList = ref(["mtrewember3", "memwqreber3", "membeadfsra2"]);
onMounted(() => {
  loading.value = true;
  if (radio.value == "Transfer") {
    setTimeout(() => {
      transferData.value = transferData1;
      loading.value = false;
    }, 500);
    // setTimeout(() => {
    //   loading.value = true;
    // }, 1500);
    // setTimeout(() => {
    //   transferData.value = [];
    //   loading.value = false;
    // }, 2500);
    // setTimeout(() => {
    //   loading.value = true;
    // }, 3500);
    // setTimeout(() => {
    //   transferData.value = transferData2;
    //   selectedIdList.value = [
    //     "gudch",
    //     "key1",
    //     "memadfberb",
    //     "memqeber2",
    //     "mtrewember3",
    //     "memwqreber3",
    //     "membeadfsra2",
    //   ];
    //   loading.value = false;
    // }, 4500);
  } else {
    setTimeout(() => {
      // 模拟接口一分钟后返回结果
      treeData.value = treeData1;
      loading.value = false;
    }, 500);
  }
});
watch([radio], (val) => {
  loading.value = true;
  if (val == "Transfer") {
    transferData.value = transferData1;
    selectedIdList.value = [
      "gudch",
      "key1",
      "memadfberb",
      "memqeber2",
      "mtrewember3",
      "memwqreber3",
      "membeadfsra2",
    ];
  } else {
    treeData.value = treeData2;
    setTimeout(() => {
      // 模拟接口一分钟后返回结果
      treeData.value = treeData1;
      currentNodeKey.value = "710da446419b4ff28ec60d35743bb422";
    }, 100);
  }
  loading.value = false;
});
function onSave(data, callback) {
  console.log("正在保存节点", data);
  // 调用业务接口
  xxxxxx().then((res) => {
    if (res?.code == 200) {
      callback();
    }
  });
}
function onDelete(data, callback) {
  console.log("正在删除节点", data);
  // 调用业务接口
  xxxxxx().then((res) => {
    if (res?.code == 200) {
      callback();
    }
  });
}

async function xxxxxx() {
  return await {
    code: 200,
  };
}
const transferData1 = [
  {
    label: "东北地区",
    id: "dongbei",
    children: [
      {
        label: "利奥宁州",
        id: "liaoning",
        children: [
          {
            label: "达利安市",
            id: "dalian",
            children: [],
            member: [
              {
                label: "王老师",
                id: "wang",
                orgId: "dalian",
              },
              {
                label: "曹老师",
                id: "cao",
                orgId: "dalian",
              },
              {
                label: "康老师",
                id: "kang",
                orgId: "dalian",
              },
              {
                label: "谷老师",
                id: "gu",
                orgId: "dalian",
              },
            ],
          },
        ],
        member: [
          {
            label: "一级部门经理",
            id: "memy45ber1",
            orgId: "liaoning",
          },
          {
            label: "一级部门副经理",
            id: "memqeber2",
            orgId: "liaoning",
          },
          {
            label: "成员1",
            id: "mtrewember3",
            orgId: "liaoning",
          },
          {
            label: "成员2",
            id: "memwqreber3",
            orgId: "liaoning",
          },
          {
            label: "DaXie",
            id: "DaXie1",
            orgId: "liaoning",
          },
          {
            label: "daxie",
            id: "DaXie2",
            orgId: "liaoning",
          },
        ],
      },
      {
        label: "西钢市",
        id: "xigangshi",
        children: [],
        member: [],
      },
      {
        label: "干净子",
        id: "ganjinzi",
        children: [],
        member: [
          {
            label: "董老师",
            id: "dong_j",
            orgId: "ganjinzi",
          },
        ],
      },
      {
        label: "测试",
        id: "test",
        children: [
          {
            label: "二级",
            id: "dept2",
            children: [
              {
                label: "三级1",
                id: "dept3",
                children: [],
                member: [
                  {
                    label: "三级1成员1",
                    id: "deotboss3",
                    orgId: "dept3",
                  },
                  {
                    label: "三级1成员2",
                    id: "member3",
                    orgId: "dept3",
                  },
                ],
              },
              {
                label: "三级2",
                id: "dept4",
                children: [],
                member: [
                  {
                    label: "三级2成员1",
                    id: "deotboss4",
                    orgId: "dept4",
                  },
                  {
                    label: "三级2成员2",
                    id: "member4",
                    orgId: "dept4",
                  },
                ],
              },
              {
                label: "三级3",
                id: "dept5",
                children: [],
                member: [],
              },
            ],
            member: [
              {
                label: "三级3成员1",
                id: "deotboss",
                orgId: "dept2",
              },
              {
                label: "三级3成员1",
                id: "member",
                orgId: "dept2",
              },
            ],
          },
        ],
        member: [
          {
            label: "测试成员",
            id: "boss",
            orgId: "test",
          },
        ],
      },
    ],
    member: [
      {
        label: "总经理",
        id: "member1dsfas",
        orgId: "dongbei1",
      },
      {
        label: "董事长",
        id: "membeadfsra2",
      },
    ],
  },
];
const transferData2 = [
  {
    label: "中国集团",
    id: "dongbei",
    children: [],
    member: [
      {
        label: "一级部门经理",
        id: "memy45ber1",
        orgId: "liaoning",
      },
      {
        label: "一级部门副经理",
        id: "memqeber2",
        orgId: "liaoning",
      },
      {
        label: "成员1",
        id: "mtrewember3",
        orgId: "liaoning",
      },
      {
        label: "成员2",
        id: "memwqreber3",
        orgId: "liaoning",
      },
      {
        label: "董老师",
        id: "dong_j",
        orgId: "health",
      },
      {
        label: "部门经理",
        id: "deotboss3",
        orgId: "dept3",
      },
      {
        label: "部门成员",
        id: "member3",
        orgId: "dept3",
      },
      {
        label: "部门经理",
        id: "deotboss4",
        orgId: "dept4",
      },
      {
        label: "部门成员",
        id: "member4",
        orgId: "dept4",
      },
      {
        label: "事业部经理",
        id: "boss",
        orgId: "test",
      },
      {
        label: "总经理",
        id: "member1dsfas",
        orgId: "dongbei1",
      },
      {
        label: "董事长",
        id: "membeadfsra2",
      },
    ],
  },
];
function afterSearch() {}
function check() {}
function afterCancel() {}
function afterClose() {}
const treeData1 = [
  {
    children: [
      {
        children: [
          {
            children: [
              {
                children: [
                  {
                    children: [
                      {
                        children: [
                          {
                            id: "321db4d9e8eb4e29be1539b8349ddb3b",
                            label: "七级机构",
                            code: "qq",
                            level: 6,
                            parentId: "47dccd84f8964414bd4e745c3a98537f",
                            iconShow: false,
                          },
                        ],
                        id: "47dccd84f8964414bd4e745c3a98537f",
                        label: "机构3-1-1-1-1-1-1",
                        code: "org3-1-1-1-1-1-1",
                        level: 5,
                        parentId: "41db303a095e45998815be11fce542f5",
                        iconShow: false,
                      },
                    ],
                    id: "41db303a095e45998815be11fce542f5",
                    label: "机构3-1-1-1-1",
                    code: "org3-1-1-1-1",
                    level: 4,
                    parentId: "0d7b9e9d3b0c4082bf45ef21c1507b55",
                    iconShow: false,
                  },
                ],
                id: "0d7b9e9d3b0c4082bf45ef21c1507b55",
                label: "机构3-1-1-1",
                code: "org3-1-1-1",
                level: 3,
                parentId: "a87cd039b02049d5b5940982e8f06a86",
                iconShow: false,
              },
              {
                id: "a35d1e9fa37b4241bca172b3e216fd2d",
                label: "机构3-1-1-2",
                code: "org3-1-1-2",
                level: 3,
                parentId: "a87cd039b02049d5b5940982e8f06a86",
                iconShow: false,
              },
            ],
            id: "a87cd039b02049d5b5940982e8f06a86",
            label: "机构3-1-1",
            code: "org3-1-1",
            level: 2,
            parentId: "68676ce42f2d449ba3620d1e1c9d077d",
            iconShow: false,
          },
        ],
        id: "68676ce42f2d449ba3620d1e1c9d077d",
        label: "机构3-1",
        code: "org3-1",
        level: 1,
        parentId: "209fcf0de4294642944de50cc37a13d5",
        iconShow: false,
      },
      {
        id: "877acf43be154f01b684020e08658cc8",
        label: "机构3-2",
        code: "org3-2",
        level: 1,
        parentId: "209fcf0de4294642944de50cc37a13d5",
        iconShow: false,
      },
    ],
    id: "209fcf0de4294642944de50cc37a13d5",
    label: "机构3",
    code: "org3",
    level: 0,
    parentId: "-1",
    iconShow: false,
  },
  {
    children: [
      {
        id: "8b95c9bba6df4e4997f02e67aeed0511",
        label: "机构2-1特别长特别长特别长怎么回事儿看看吧",
        code: "org2-1",
        level: 1,
        parentId: "180363abd0ea4b7f9505e8e568a1ca25",
        iconShow: false,
      },
    ],
    id: "180363abd0ea4b7f9505e8e568a1ca25",
    label: "机构2",
    code: "org2",
    level: 0,
    parentId: "-1",
    iconShow: false,
  },
  {
    children: [
      {
        id: "55b93e2620294ac1bad0062b37db1ade",
        label: "机构1-1",
        code: "org11",
        level: 1,
        parentId: "ORGANIZATION_DEFAULT",
        iconShow: false,
      },
    ],
    id: "ORGANIZATION_DEFAULT",
    label: "机构1",
    code: "ORGANIZATION_DEFAULT",
    level: 0,
    parentId: "-1",
    iconShow: false,
  },
  {
    id: "65e29ae95a214b8d91d6750395a8feec",
    label: "机构4",
    code: "org4",
    level: 0,
    parentId: "-1",
    iconShow: false,
  },
  {
    id: "710da446419b4ff28ec60d35743bb422",
    label: "机构5名称特别长长到都显示不下了看看是啥样子",
    code: "org5",
    level: 0,
    parentId: "-1",
    iconShow: false,
  },
];
const treeData2 = [
  {
    children: [
      {
        children: [
          {
            children: [
              {
                children: [
                  {
                    children: [
                      {
                        children: [
                          {
                            id: "321db4d9e8eb4e29be1539b8349ddb3b",
                            label: "七级机构",
                            code: "qq",
                            level: 6,
                            parentId: "47dccd84f8964414bd4e745c3a98537f",
                            iconShow: false,
                          },
                        ],
                        id: "47dccd84f8964414bd4e745c3a98537f",
                        label: "机构3-1-1-1-1-1-1",
                        code: "org3-1-1-1-1-1-1",
                        level: 5,
                        parentId: "41db303a095e45998815be11fce542f5",
                        iconShow: false,
                      },
                    ],
                    id: "41db303a095e45998815be11fce542f5",
                    label: "机构3-1-1-1-1",
                    code: "org3-1-1-1-1",
                    level: 4,
                    parentId: "0d7b9e9d3b0c4082bf45ef21c1507b55",
                    iconShow: false,
                  },
                ],
                id: "0d7b9e9d3b0c4082bf45ef21c1507b55",
                label: "机构3-1-1-1",
                code: "org3-1-1-1",
                level: 3,
                parentId: "a87cd039b02049d5b5940982e8f06a86",
                iconShow: false,
              },
              {
                id: "a35d1e9fa37b4241bca172b3e216fd2d",
                label: "机构3-1-1-2",
                code: "org3-1-1-2",
                level: 3,
                parentId: "a87cd039b02049d5b5940982e8f06a86",
                iconShow: false,
              },
            ],
            id: "a87cd039b02049d5b5940982e8f06a86",
            label: "机构3-1-1",
            code: "org3-1-1",
            level: 2,
            parentId: "68676ce42f2d449ba3620d1e1c9d077d",
            iconShow: false,
          },
        ],
        id: "68676ce42f2d449ba3620d1e1c9d077d",
        label: "机构3-1",
        code: "org3-1",
        level: 1,
        parentId: "209fcf0de4294642944de50cc37a13d5",
        iconShow: false,
      },
    ],
    id: "209fcf0de4294642944de50cc37a13d5",
    label: "机构3",
    code: "org3",
    level: 0,
    parentId: "-1",
    iconShow: false,
  },
  {
    children: [
      {
        id: "8b95c9bba6df4e4997f02e67aeed0511",
        label: "机构2-1特别长特别长特别长怎么回事儿看看吧",
        code: "org2-1",
        level: 1,
        parentId: "180363abd0ea4b7f9505e8e568a1ca25",
        iconShow: false,
      },
    ],
    id: "180363abd0ea4b7f9505e8e568a1ca25",
    label: "机构2",
    code: "org2",
    level: 0,
    parentId: "-1",
    iconShow: false,
  },
  {
    children: [
      {
        id: "55b93e2620294ac1bad0062b37db1ade",
        label: "机构1-1",
        code: "org11",
        level: 1,
        parentId: "ORGANIZATION_DEFAULT",
        iconShow: false,
      },
    ],
    id: "ORGANIZATION_DEFAULT",
    label: "机构1",
    code: "ORGANIZATION_DEFAULT",
    level: 0,
    parentId: "-1",
    iconShow: false,
  },
];
</script>
<style lang="scss" scoped>
.divider {
  border-left: 1px solid #9093994f;
  float: left;
  height: 100%;
}

.right {
  // 1px 是中间的分割线，需要给分割线让出点儿位置
  width: calc(70% - 66px);
  float: left;
  height: 100%;
}
#app {
  text-align: center;
  color: var(--ep-text-color-primary);
}

.element-plus-logo {
  width: 50%;
}
.m10 {
  margin: 10px;
}
.h80 {
  height: 80%;
  padding: 10px;
  border-radius: 4px;
}
.w25 {
  width: 25%;
}
.w50 {
  width: 60%;
}
.border {
  border: 1px solid #9093994f;
}
.p10 {
  padding: 10px;
}
.mr20 {
  margin-right: 20px;
}
.result {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #80808078;
}
.flr {
  float: right;
}
.w40 {
  width: 40%;
}
.pluginsRadio {
  border-bottom: 1px solid #9093994f;
}
</style>
